<template>
    <div id="mini_video_container">
        <div class="fixedTop" v-show="layerDisplay">
            <sharecarousel @change="getState" :wakeup-param="callApp"></sharecarousel>
        </div>
        <div class="takeup" v-show="layerDisplay"></div>
        <div class="mini_video_play" @click="openApp()">
            <img class="still" v-lazy="vdatas.stills + '?cmd=imageprocess/processtype/2/quality/100/width/514'"/>
            <img class="open_play" src="../../assets/images/open_app_play.png"/>

        </div>
        <div id="wrapper">
            <div v-if="vdatas">
                <div class="minivideo-title">{{vdatas.name}}</div>
                <author2 :channelInfo="channelInfo" :info="vdatas"></author2>
                <div class="minivideo-content">{{vdatas.description}}</div>
            </div>
            <div v-if="contentList.totalCount>0" class="greyChannel"></div>
            <div v-if="contentList.totalCount>0" class="mini_video_about">— 相关视频 —</div>
        <!-- 其它相关视频专用左文右图组件 -->
        <div v-if="contentList.totalCount>0">
            <listvideosmall v-for="(item,index) in contentList.rows" :info="item" v-if="contentList.totalCount>0"></listvideosmall>
        </div>
        <div v-if="contentList.totalCount>0" class="page-container" @click="getContents()">{{loadMore}}<span class="down-arrow"></span></div>
        </div>
    </div>
</template>

<script>
    import qs from "querystring"
    import Wakeup from "../../assets/libs/func/callapp.js"

    export default {
        components: {

            Sharecarousel: function (resolve) {
                require(["../../components/share_carousel.vue"], resolve)
            },
            Listvideosmall: function (resolve) {
                require(["../../components/list_video_small.vue"], resolve)
            },
            Author2: function (resolve) {
                require(["../../components/author2.vue"], resolve)
            },
            Wakeup
        },
        data: function () {
            return {
                jhb_info:{
                    contentId:this.$route.params.videoid,
                    contentType:5
                },
                layerDisplay: {
                    type: Boolean,
                    default: true
                },
                channelInfo:{},
                vdatas: {},
                channelid: "",
                vid: "",
                callApp: {
                    contentType: 3,
                    contentParam: this.$route.params.videoid
                },
                paramValue: {
                    businessType: "vod",
                    activityId: this.$route.params.channelid,   // 177555
                    roleType: "0",
                    programId: this.$route.params.videoid,    // 40288db463f2ba5e0163f713841302aa
                    preChatId: "0"
                },
                page: 1,
                pageSize: 5,
                loadMore: "加载更多",
                canLoadMore: true,
                onTop: true,
                contentList: {
                    rows: [],
                    style: 0,
                    totalCount: 0
                },
            }
        },
        beforeCreate: function () {
            let that = this;

            // 获取频道信息
            this.axios.post(
                    interbaseUrl + "setsail/external/externalService?service=getChannelDetail",
                    qs.stringify({
                        params: JSON.stringify({
                            channelId: this.$route.params.channelid
                        }),
                        apiVersion: process.env.VUE_APP_SERVER_VER
                    })
            ).then((response) => {
               /* // 404重定向
                if (response.data.state === 2012)
                    this.$router.push("/yfs/Dnf");*/
                this.channelInfo = response.data.data;
            });

            // console.log(interbaseUrl + "setsail/external/externalService?service=getVideoDetail");
            // 获取视频：By 李晔
            this.axios.post(
                    interbaseUrl + "setsail/external/externalService?service=getVideoDetail",
                    qs.stringify({
                        params: JSON.stringify({
                            videoId: this.$route.params.videoid     // 40288db463d55cdf0163f1d4cad305fc
                        }),
                        apiVersion: process.env.VUE_APP_SERVER_VER
                    })
            ).then((response) => {
                //404
                if (response.data.state == 2056){
                    window.location.href = "//"+window.location.host+"/yfs/Dnf";
                    return false;
                }
                // console.log("==========================");
                // console.log(JSON.stringify(response.data.data, undefined, 2));
                // console.log("==========================");
                let that = this;
                this.vdatas = response.data.data;
                function doAccessvideo() {
                    let actionType = "accessvideo";
                    let behaviorData = {
                        "uid": "",
                        "username": "",
                        "ip":"",
                        "contentid":that.$route.params.videoid,
                        "imei": "",
                        "extendtag": "",
                        "type": "vod_2",
                        "contenttype": "vod",
                        "opertime": that.toFullTime(),
                        "contentname":that.vdatas.name,
                        "channelid": that.$route.params.channelid ,
                        "sharetype": "",
                    };
                    shareUrlReport(behaviorData, actionType);
                }
                doAccessvideo();
                // 修改页面信息
                let meta = {
                    title: !(response.data.state == 2056) ? this.vdatas.shareTitle : "视频不存在",
                    content: !(response.data.state == 2056) ? this.vdatas.shareContent : "视频不存在",
                    name: !(response.data.state == 2056) ? that.vdatas.name : "视频不存在"
                };
                // console.log(meta);
                this.createMetaInfo(meta);
                this.freshTitles(!(response.data.state == 2056) ? this.vdatas.shareTitle : "视频不存在");
                if (response.data.data) {



//                this.theTopicId = this.vdatas.id;
//                console.log("theTopicId:" + this.theTopicId);
                    this.paramValue.contenturl = window.location.href;
                    this.paramValue.contenttitle = !(response.data.state == 2056) ? that.vdatas.name : "视频不存在";




                    // 二次分享
                    this.initShareConfig = initShareConf(
                            that.channelInfo.shareTitle,
                            that.channelInfo.shareContent,
                            that.channelInfo.shareImg,
                            window.location.href,
                            {
                                uid: "",
                                username: "",
                                opertime: that.toFullTime(),
                                imei: "",
                                openid: "",
                                ip: "",
                                channelid: that.$route.params.channelid,
                                contentid: that.$route.params.videoid,
                                name: that.vdatas.name,
                                contenttype: "vod",
                                type: "vod_2",
                                tagid: "",
                                extendtag: "",
                                sharetype: "weixin",
                                shareurl: window.location.href
                            }
                    );

                }
            });

        },
        mounted: function () {
            let that = this;
            that.getContents();

            // 配置二次分享信息
            window.initShareConfig = initShareConf(
                    that.channelInfo.shareTitle,
                    that.channelInfo.shareContent,
                    that.channelInfo.shareImg,
                    window.location.href,
                    {
                        uid: "",
                        username: "",
                        tagid: "",
                        contentid: that.$route.params.videoid,
                        imei: "",
                        openid: "",
                        ip: "",
                        name: that.vdatas.name,
                        extendtag: "",
                        type: "vod_2",
                        contenttype: "vod",
                        opertime:  that.toFullTime(),
                        channelid: that.$route.params.channelid
                    }
            );

        },
        methods: {

            getState: function (bol) {
                // console.log(bol);
                this.layerDisplay = bol;
            },
            // 获取相关联的视频内容：注意数据结构的转换
            getContents: function () {
                this.loadMore = "加载中，请稍候...";
                this.axios.post(
                        interbaseUrl + "setsail/external/externalService?service=getRelatedVideoList",
                        qs.stringify({
                            params: JSON.stringify({
                                videoId: this.$route.params.videoid,
                                idx: (this.page - 1) * this.pageSize,
                                size: this.pageSize
                            }), apiVersion: process.env.VUE_APP_SERVER_VER
                        })
                ).then((response) => {
                    let responseData = response.data.data;
                    // console.log("**************************");
                    //console.log(JSON.stringify(responseData, undefined, 2));
                    // console.log("**************************");

                    // 进行必要的数据格式转换
                    for (let key in responseData.rows) {
                        responseData.rows[key] = {
                            content: responseData.rows[key]
                        };
                        responseData.rows[key].contentId = responseData.rows[key].content.id;
                        responseData.rows[key].type = 5;
                    }

                    this.contentList.style = responseData.style;
                    this.contentList.totalCount = responseData.totalCount;
                    if (this.canLoadMore)
                        this.contentList.rows = this.contentList.rows.concat(responseData.rows);
                    if (this.contentList.rows.length >= responseData.totalCount) {
                        this.loadMore = "已经加载全部";
                        this.canLoadMore = false;
                    } else {
                        this.page++;
                        this.loadMore = "加载更多";
                    }

                    // console.log("**************************");
                    // console.log(JSON.stringify(this.contentList, undefined, 2));
                    // console.log("**************************");
                });
            },
            openApp: function () {
                openDownPage(this.callApp.contentType, this.callApp.contentParam);
            }
        }
    }
</script>

<style>

.mini_video_play{
    position: relative;
    padding-bottom: 100%;
    width:100%;
    top:0;
    left:0;

}
.mini_video_play .still{
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    position: absolute;
    object-fit: cover;
    z-index: 1;
}
.mini_video_play .open_play{
    position: absolute;
    width: 139px;
    top:50%;
    left:50%;
    margin-left: -69px;
    margin-top: -36px;
    z-index: 2;
}
.title_container{
    width:100%;
    position: absolute;
    left:0;
    bottom: 0;
    padding:12px;
    z-index: 5;
    box-sizing: border-box;
}
.title_container .title_content{
    font-size: 18px;
    line-height: 20px;
    word-break: break-all;
    font-family: "PingFangSC";
    color: #fff;
}
.title_container .title_bg{
    background:linear-gradient(360deg,rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%);
    height:100%;
    width:100%;
    z-index: -1;
    position: absolute;
    left:0;
    top:0;
}
.list-video-small-component-item:first-child{
border-top: 0;
}
.mini_video_about{
    text-align: center;
    font-size:13px;
    font-family:PingFangSC;
    font-weight:400;
    color:#666666;
    line-height:12px;
    margin-top: 19px;
    margin-bottom: 5px;
}
.page-container {
    margin-top: 15px;
    line-height: 30px;
}

.down-arrow {
    display: inline-block;
    position: relative;
    width: 12px;
    height: 10px;
    margin-right: 10px;
}

.down-arrow::after {
    display: inline-block;
    content: " ";
    height: 7px;
    width: 7px;
    border-width: 0 1px 1px 0;
    border-color: #999999;
    border-style: solid;
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform-origin: center;
    transition: transform .3s;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -7px;
}
.minivideo-title {
    font-size: 1.3rem;
    line-height: 1.8rem;
    font-weight: bold;
}

.minivideo-content {
    font-size: 0.9rem;
    line-height: 1.2rem;
    color: #999999;
    padding-bottom: 16px;
}

</style>